<template>
	<view class="element-properties" v-if="element">
		<u-form :model="element.style" labelPosition="top">
			<u-form-item label="元素类型">
				<u-input v-model="element.type" disabled></u-input>
			</u-form-item>

			<u-form-item label="X位置">
				<u-number-box 
					v-model="element.style.left" 
					:min="0" 
					:max="slideWidth"
					integer>
				</u-number-box>
			</u-form-item>

			<u-form-item label="Y位置">
				<u-number-box 
					v-model="element.style.top" 
					:min="0" 
					:max="slideHeight"
					integer>
				</u-number-box>
			</u-form-item>

			<u-form-item label="宽度">
				<u-number-box 
					v-model="element.style.width" 
					:min="20" 
					:max="slideWidth"
					integer>
				</u-number-box>
			</u-form-item>

			<u-form-item label="高度">
				<u-number-box 
					v-model="element.style.height" 
					:min="20" 
					:max="slideHeight"
					integer>
				</u-number-box>
			</u-form-item>

			<u-form-item label="层级">
				<u-number-box 
					v-model="element.style.zIndex" 
					:min="1" 
					:max="10"
					integer>
				</u-number-box>
			</u-form-item>

			<template v-if="element.type === 'text'">
				<u-form-item label="文本内容">
					<u-input v-model="element.content" type="textarea"></u-input>
				</u-form-item>

				<u-form-item label="字体大小">
					<u-number-box 
						v-model="element.style.fontSize" 
						:min="8" 
						:max="72"
						integer>
					</u-number-box>
				</u-form-item>

				<u-form-item label="字体颜色">
					<u-color-picker v-model="element.style.color"></u-color-picker>
				</u-form-item>
			</template>

			<template v-if="element.type === 'image'">
				<u-form-item label="图片替换">
					<u-upload
						:fileList="imageFileList"
						@afterRead="handleImageChange"
						@delete="handleImageDelete"
						multiple
						:maxCount="1"
						uploadText="更换图片">
					</u-upload>
				</u-form-item>
			</template>

			<u-button type="error" @click="removeElement">删除元素</u-button>
		</u-form>
	</view>
</template>

<script>
export default {
	props: {
		element: {
			type: Object,
			default: null
		},
		slideWidth: {
			type: Number,
			default: 900
		},
		slideHeight: {
			type: Number,
			default: 600
		}
	},
	data() {
		return {
			imageFileList: []
		}
	},
	methods: {
		removeElement() {
			this.$emit('remove')
		},
		handleImageChange(event) {
			const file = event.file[0]
			this.$emit('update:element', {
				...this.element,
				src: file.url || file.tempFilePath
			})
			this.imageFileList = [file]
		},
		handleImageDelete() {
			this.$emit('update:element', {
				...this.element,
				src: ''
			})
			this.imageFileList = []
		}
	}
}
</script>

<style lang="scss" scoped>
.element-properties {
	padding: 20rpx;
	height: 100%;
	overflow-y: auto;
}
</style>